<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    
    <!-- Assorted iOS-related metadata. -->
    <meta name="viewport" content="width=768, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>An iPad Keyboard Simulation</title>
    <link rel="stylesheet" href="ipad-keyboard.css" type="text/css" />

    <!-- Load up jQuery first. -->
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

    <!-- Keyboard-specific event handling. -->
    <script src="ipad-keyboard.js"></script>
  </head>
  <body>
    <p id="hud">
        <button id="start-button">Start</button>
        <input id="keyboard-checkbox" type="checkbox" />
        <label for="keyboard-checkbox"
          id="keyboard-checkbox-label">Experimental Keyboard</label>
        <span id="message-label">String Number:</span>
        <span id="message"></span>
        <span id="timing-result"></span>
    </p>

    <p id="content-to-type" class="content-normal">
      <span class="typed-text"></span><span
        class="current-text"></span><span
        class="text-to-type"></span></p>
    <div class="keyboard">
        <div class="keyboard-row">
            <div class="key" id="q-key"><span id="q-key-hit">Q</span></div>
            <div class="key" id="w-key"><span id="w-key-hit">W</span></div>
            <div class="key" id="e-key"><span id="e-key-hit">E</span></div>
            <div class="key" id="r-key"><span id="r-key-hit">R</span></div>
            <div class="key" id="t-key"><span id="t-key-hit">T</span></div>
            <div class="key" id="y-key"><span id="y-key-hit">Y</span></div>
            <div class="key" id="u-key"><span id="u-key-hit">U</span></div>
            <div class="key" id="i-key"><span id="i-key-hit">I</span></div>
            <div class="key" id="o-key"><span id="o-key-hit">O</span></div>
            <div class="key" id="p-key"><span id="p-key-hit">P</span></div>
            <div class="key" id="backspace-key"><span id="backspace-key-hit">⌫</span></div>
        </div>
        <div class="keyboard-row home">
            <div class="key" id="a-key"><span id="a-key-hit">A</span></div>
            <div class="key" id="s-key"><span id="s-key-hit">S</span></div>
            <div class="key" id="d-key"><span id="d-key-hit">D</span></div>
            <div class="key" id="f-key"><span id="f-key-hit">F</span></div>
            <div class="key" id="g-key"><span id="g-key-hit">G</span></div>
            <div class="key" id="h-key"><span id="h-key-hit">H</span></div>
            <div class="key" id="j-key"><span id="j-key-hit">J</span></div>
            <div class="key" id="k-key"><span id="k-key-hit">K</span></div>
            <div class="key" id="l-key"><span id="l-key-hit">L</span></div>
            <div class="key" id="return-key"><span id="return-key-hit">return</span></div>
        </div>
        <div class="keyboard-row">
            <div class="key" id="left-shift-key"><span id="left-shift-key-hit">⇧</span></div>
            <div class="key" id="z-key"><span id="z-key-hit">Z</span></div>
            <div class="key" id="x-key"><span id="x-key-hit">X</span></div>
            <div class="key" id="c-key"><span id="c-key-hit">C</span></div>
            <div class="key" id="v-key"><span id="v-key-hit">V</span></div>
            <div class="key" id="b-key"><span id="b-key-hit">B</span></div>
            <div class="key" id="n-key"><span id="n-key-hit">N</span></div>
            <div class="key" id="m-key"><span id="m-key-hit">M</span></div>
            <div class="key" id="comma-key"><span id="comma-key-hit">,</span></div>
            <div class="key" id="period-key"><span id="period-key-hit">.</span></div>
            <div class="key" id="right-shift-key"><span id="right-shift-key-hit">⇧</span></div>
        </div>
        <div class="keyboard-row">
            <div class="key" id="space-bar"><span id="space-bar-hit">&nbsp;</span></div>
        </div>
    </div>
  </body>
</html>
